<!--
 * @Description: 
 * @Author: chaixinyu
 * @Date: 2022-12-22 17:45:55
 * @LastEditors: 47
 * @LastEditTime: 2023-02-11 15:27:18
-->
<template>
  <div class="course-task">

    <van-pull-refresh v-model="loading" @refresh="onRefresh" success-text="刷新成功">

      <!-- 讨论 -->
      <div class="task-discuss" @click="goCourseDiscussion">
        <van-cell is-link>

          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <div class="discuss-box">
              <div class="discuss-img">
                <span class="iconfont icon-xiaoxi1 img-font"></span>
              </div>
              <span class="custom-title">讨论</span>
            </div>
          </template>

        </van-cell>
      </div>

      <!-- 作业/考试 -->
      <div class="task-discuss" @click="goHomeworkTest">
        <van-cell is-link>

          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <div class="discuss-box">
              <div class="discuss-img">
                <span class="iconfont icon-dingdandingdanmingxishouzhimingxi img-font"></span>
              </div>
              <span class="custom-title">作业 / 考试</span>
            </div>
          </template>
          
        </van-cell>
      </div>

      <!-- 通知 -->
      <div class="task-inform" @click="goCourseNotice(notice.notice_id,notice.notice_status)" v-for="notice in noticeList" :key="notice.notice_id">
        <van-cell>

          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <div class="inform-box">

              <!-- 通知图片 -->
              <div :class="{'active-inform-img':notice.notice_status == 0,'unactive-inform-img':notice.notice_status == 1}">
                <span class="iconfont img-font">通知</span>
              </div>

              <!-- 通知内容 -->
              <div class="inform-message">

                <span class="message">
                  {{notice.notice_title}}
                </span>

                <span class="time">
                  {{ notice.notice_time }}
                </span>

              </div>
            </div>
          </template>

        </van-cell>
      </div>

      <!-- 签到 -->
      <div class="task-inform" @click="signIn(sign.sign_id,sign.sign_status)" v-for="sign in SignList" :key="sign.sign_id">
        <van-cell>

          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <div class="inform-box">

              <!-- 通知图片 -->
              <div :class="{'active-inform-img':sign.sign_status==0,'unactive-inform-img':sign.sign_status==1}">
                <span class="iconfont img-font">签到</span>
              </div>

              <!-- 通知内容 -->
              <div class="inform-message">

                <span class="message">
                  {{sign.sign_title}}
                </span>

                <span class="time">
                  {{ sign.sign_time }}
                </span>

              </div>
            </div>
          </template>

        </van-cell>
      </div>

      <!-- 下拉刷新 -->
      <div class="task-refresh" @click="goCourseDiscussion">
        下拉刷新可查看是否有新任务
      </div>

    </van-pull-refresh>

   

  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
// 引入vant
import { Cell, CellGroup,PullRefresh } from 'vant';

// 引入dayjs
import dayjs from 'dayjs'

// 引入路由
import { useRouter } from 'vue-router'

// 导入 course 仓库
import {useCourseStore} from '@/stores/course'
import { storeToRefs } from 'pinia';

// 实例化仓库对象
const course = useCourseStore()

// 解构 数据
const {courseId,noticeList,noticeId,discussList,SignList} = storeToRefs(course)

// 解构 方法
const {getCourseNoticeList,getCourseSignList,updateNoticeStatus,updateSignStatus,getSignTime} = course

// 组件挂载完毕后渲染
onMounted(async() => {
  try {
    // 获取课程下的通知列表
    await getCourseNoticeList(courseId.value,1)
    //获取课程的签到列表 
    await getCourseSignList(courseId.value,1)
  } catch (error) {
    alert(error.message)
  }
})

// 实例化路由
const router = useRouter()

// 控制签到成功的变量
let sign = ref(true)

// 作完成后将 v-model 设置为 false，表示加载完成
const loading = ref(false);

// 下拉刷新时会触发 refresh 事件
const onRefresh = () => {
  setTimeout(() => {
    loading.value = false;
  }, 1000);
};

// 跳转到课程讨论页面
const goCourseDiscussion = () => {
  router.push('/coursediscussion')
}

// 跳转到作业/考试页面
const goHomeworkTest = () => {
  router.push('/homeworktest')
}

// 跳转到通知详情页
const goCourseNotice = async (noticeid,noticeStatus) => {
  course.noticeId = noticeid
  router.push('/coursenotice')
  //点击没有查看的通知将状态修改为1
  if(noticeStatus == 0){
    await updateNoticeStatus(noticeid,1)
  }
}

// 点击签到，签到成功
const signIn = async (signId,signStatus) => {

    let successTime = ""

  // 如果没有签到时间就获取一个
  if(signStatus == 0){
    //获取点击的当前时间
    successTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm') 
    await getSignTime({signId,userId:1,signSuccessTime:successTime})
  }
 
  // 路由跳转并传参
  router.push({
    name:'coursesign',
    params:{
      signId,
    }
  })
  
  //点击没有查看的签到将状态修改为1
  if (signStatus == 0) {
    await updateSignStatus(signId,1)
  }

}
</script>

<style lang="less">

.course-task{

  .van-cell--clickable{
    border-bottom: 1px solid #f0f0f0;
  }

  .task-discuss{
   
    .discuss-box{
      display: flex;
      flex-flow: row;

      .discuss-img{
        width: 50px;
        height: 50px;
        border-radius: 7px;
        background-color: #1cccc1;

        .img-font{
          margin-left: 10px;
          line-height: 50px;
          font-size: 30px;
          color: #f0fcfc;
        }
      }

      .custom-title{
        margin-left: 16px;
        line-height: 50px;
      }

     
    }
   
    .van-cell__right-icon{
      margin-top: 15px;
    }
  }

  .task-inform{
    border-bottom: 1px solid #f0f0f0;
    
    .inform-box{
      display: flex;
      flex-flow: row;
      align-items: center;

      .active-inform-img{
        background-color: #33adff;
      }
      .unactive-inform-img{
        background-color: #c4c9cc;

      }
      .active-inform-img,
      .unactive-inform-img{
        width: 50px;
        height: 50px;
        border-radius: 7px;

        .img-font{
          margin-left: 7px;
          line-height: 50px;
          font-size: 18px;
          color: #f0fcfc;
        }
      }

      .inform-message{
        display: flex;
        flex-flow: column;
        margin-left: 16px;
        width: 280px;

        .time{
          color: #c2c2c2;
          font-size: 12px;
        }
      }
     
    }
   
    .van-cell__right-icon{
      margin-top: 15px;
    }
  }

  .task-refresh{
    padding: 10px;
    height: 150px;
    text-align:center;
    color: #c4c9cc;
    font-size: 13px;
  }
  
}
</style>
